<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <div id="app">
      <input type="button" value="获取元素" @click="getElement" ref="mybtn" />
      <h1 id="myh1" ref="myh1" v-text="msg"></h1>

      <hr />

      <login ref="mylogin"></login>
    </div>

    <template id="login">
      <div>
        <h2 v-text="sonmsg2"></h2>
      </div>
    </template>
    <script type="text/javascript">
      var login = {
        template: "#login",
        data() {
          return {
            sonmsg: "嘻嘻嘻",
            sonmsg2: "登陆组件"
          };
        },
        methods: {
          show() {
            console.log("调用了子组件的方法");
          }
        }
      };

      // 创建 Vue实例，得到 ViewModel  在vm实例(组件)控制区域内部 通过ref属性引用(获取)vm控制区域原生dom或组件
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "哈哈哈"
        },
        methods: {
          getElement() {
            // console.log(document.getElementById('myh1').innerText);
            //  ref  是 英文单词 【reference 引用】   值类型 和 引用类型  referenceError
            // console.log(this.$refs.myh1.innerText);
            // this.$refs默认是个引用空对象
            // this.$refs.mylogin.show(); // 访问子组件(私有组件)methods中方法
            // $refs带有s可以通过ref有多个引用(获取)多个dom节点
            // console.log(this.$refs.mylogin.sonmsg); // 获取子组件实例身上的data数据
          }
        },
        components: {
          login
        }
      });
    </script>
  </body>
</html>
